<template style="height:100%;">
  <div class="select_class">
    <mt-navbar v-model="selected" style="position:relative;height:1.2rem;">
      <mt-tab-item id="1">托管班</mt-tab-item>
      <mt-tab-item id="2">培训班</mt-tab-item>
      <a @click="$api.goBack()" class="back"></a>
      <a class="add" v-if="!studentType&&useInfo.tsMenuList[1].voOperate.addObj" @click="showDetail()" style="font-size: 0.48rem;text-decoration:none;top:0.25rem;">添加</a>
    </mt-navbar>    
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <ul>
          <li v-for="(item,index) in showData">
            <div class="title" v-if="!(index!=0&&item.studyYear==showData[index-1].studyYear&&item.studyTerm==showData[index-1].studyTerm)">
              <div>{{item.studyYear}}</div>
              <div>{{formatterTerm(item.studyTerm)}}</div>
            </div>
            <div class="main"  @click="showDetail(index,0)">
              <div class="flex">
                <div class="head">
                  <img :src="$api.formatterImg(item.classPhoto)" />
                </div>
                <div class="classroom">
                  <div class="className">{{item.className}}({{item.countNum}})</div>
                  <div class="teacher">{{item.mainTeacherName}}</div>
                </div>
              </div>
              <div class="more"></div>
            </div>
          </li>
        </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <ul>
          <li v-for="(item,index) in showData1">
            <div class="title" v-if="!(index!=0&&item.studyYear==showData1[index-1].studyYear&&item.studyTerm==showData1[index-1].studyTerm)">
              <div>{{item.studyYear}}</div>
              <div>{{formatterTerm(item.studyTerm)}}</div>
            </div>
            <div class="main" @click="showDetail(index,1)">
              <div class="flex">
                <div class="head">
                  <img :src="item.classPhoto" />
                </div>
                <div class="classroom">
                  <div class="className">{{item.className}}({{item.countNum}})</div>
                  <div class="teacher">{{item.mainTeacherName}}</div>
                </div>
              </div>
              <div class="more"></div>
            </div>
          </li>
        </ul>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                selected: '1',
                showData: [],
                pageNum: 1,
                studentId: undefined,
                pageSize: 1000,
                pageNum1: 1,
                pageSize1: 1000,
                showData1: [],
                useInfo: '',
                studentType: undefined, //用于判断是不是点评来的,是的话,就不跳转班级详情,直接跳转,学生列表
            }
        },
        watch: {
            selected(index) {
                switch (index) {
                    case '1':
                        this.getData(0); //培训班
                        break;
                    case '2':
                        this.getData(1); //培训班
                        break;
                }
            }
        },
        methods: {
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            },
            formatterTerm(term) {
                var str = "上学期"
                if (term) {
                    str = "下学期"
                }
                return str;
            },
            showDetail(index, classType) {
                if (this.studentId) {
                    return;
                }
                this.$api.clearItem('studentType');
                if (index || index == 0) {
                    var classId;
                    if (classType) {
                        classId = this.showData1[index].classId
                    } else {
                        classId = this.showData[index].classId
                    }

                    sessionStorage.setItem('classId', classId);

                    if (this.studentType) {
                        this.$router.push({
                            path: 'g14'
                        });
                        return;
                    }

                }

                this.$router.push({
                    path: 'classDetail'
                })
            },
            getData(classType) {
                var url = "/class/selectPage"
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                    classType: classType,
                }
                this.useInfo.studentList.forEach(o => {
                    if (o.checked) {
                        params.studentId = o.studentId;
                        this.studentId = o.studentId;
                    }
                })
                if (classType) {
                    params.pageNum = this.pageNum1;
                    params.pageSize = this.pageSize1;
                }
                this.$api.post(url, params, (data) => {
                    if (classType) {
                        this.showData1 = data.info.list
                    } else {
                        this.showData = data.info.list
                    }

                })
            },
            getStudentType() { //获取类型,用于判断要展示哪部分学生,以及标题
                let studentType = JSON.parse(sessionStorage.getItem('studentType'));
                if (studentType) {
                    this.studentType = studentType;

                }
            },
        },

        created() {
            this.getUserInfo();
            this.getData(0); //托管班
            this.getStudentType();
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .flex_wrap {
        display: flex;
    }
    
    .menu_button {
        width: 2rem;
        height: 2rem;
        border: 1px solid red;
    }
</style>